新的 List 视图修饰符
属性概览
| 属性名 |
类型 |
系统要求 |
说明 |
listSectionIndexVisibility |
Visibility |
iOS 26.0+ |
控制 List 右侧 Section 索引条的可见性 |
listSectionMargins |
number | EdgeSets | { edges: EdgeSets; length: number } |
iOS 26.0+ |
自定义 Section 边距，替换系统默认边距规则 |
sectionIndexLabel |
string |
iOS 26.0+ |
设置 Section 在索引条中的字符标签 |
sectionActions |
VirtualNode |
iOS 18.0+ |
为 Section 添加自定义操作区域 |
1. listSectionIndexVisibility
1/**
2 * Sets the visibility of the list section index.
3 * @available iOS 26.0+.
4 */
5listSectionIndexVisibility?: Visibility
功能说明
控制 List 的右侧索引条是否显示。常用于需要类似通讯录 A-Z 快速跳转的场景。
可选值：
"visible""hidden""automatic"（系统自行判断）
示例
1<List listSectionIndexVisibility="visible">
2 <ForEach
3 data={groups}
4 builder={group => (
5 <Section
6 header={<Text>{group.title}</Text>}
7 sectionIndexLabel={group.title}
8 >
9 {group.items.map(item => <Text key={item}>{item}</Text>)}
10 </Section>
11 )}
12 />
13</List>
2. listSectionMargins
1/**
2 * Set the section margins for the specific edges.
3 * @available iOS 26.0+.
4 */
5listSectionMargins?: number | EdgeSets | {
6 edges: EdgeSets
7 length: number
8}
功能说明
设置 Section 的外边距，完全替换系统默认边距。可使用数值、 EdgeSets，或指定边的写法。
三种写法说明
2.1 使用单一数字作为四边边距
2.2 使用 EdgeInsets
1listSectionMargins={"all"}
2.3 针对特定边设置长度
1listSectionMargins={{
2 edges: "horizontal",
3 length: 20
4}}
此写法等同于 SwiftUI 中：
1.listSectionMargins(.horizontal, 20)
示例
1<Section
2 header={<Text>Favorites</Text>}
3 listSectionMargins={{
4 edges: "vertical",
5 12
6 }}
7>
8 <Text>Item A</Text>
9 <Text>Item B</Text>
10</Section>
3. sectionIndexLabel
1/**
2 * Sets the label that is used in a section index.
3 * @available iOS 26.0+.
4 */
5sectionIndexLabel?: string
功能说明
为 Section 设置索引条的显示字符，一般为单字母，如 “A”、“B”、“C”。
示例
1<Section
2 header={<Text>A</Text>}
3 sectionIndexLabel="A"
4>
5 <Text>Adam</Text>
6 <Text>Ana</Text>
7</Section>
4. sectionActions
1/**
2 * Adds custom actions to a section.
3 * @available iOS 18.0+
4 */
5sectionActions?: VirtualNode
功能说明
为 Section 添加自定义操作按钮、菜单等 UI，位置通常显示在 Section Header 区域的右侧。
示例：添加刷新按钮
1<Section
2 header={<Text>Downloads</Text>}
3 sectionActions={
4 <Button title="Refresh" action={() => doRefresh()} />
5 }
6>
7 <Text>File 1</Text>
8 <Text>File 2</Text>
9</Section>
示例：添加菜单动作
1<Section
2 header={<Text>Photos</Text>}
3 sectionActions={
4 <Menu title="Actions">
5 <Button title="Upload All" action={() => uploadAll()} />
6 <Button title="Delete All" action={() => deleteAll()} />
7 </Menu>
8 }
9>
10 {photos.map(photo => <Text key={photo.id}>{photo.name}</Text>)}
11</Section>
完整示例
1<List listSectionIndexVisibility="visible">
2 <ForEach
3 data={groups}
4 builder={group => (
5 <Section
6 header={<Text>{group.title}</Text>}
7 sectionIndexLabel={group.title}
8 listSectionMargins={12}
9 sectionActions={
10 <Button title="Refresh" action={() => refreshGroup(group)} />
11 }
12 >
13 {group.items.map(item => <Text key={item}>{item}</Text>)}
14 </Section>
15 )}
16 />
17</List>
